<template>
  <div class="address">
    <van-nav-bar
      left-text="返回"
      title="我的收货地址"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-address-edit
      :area-list="areaList"
      show-delete
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import areaList from "@/lib/area";
export default {
  components: {},
  data() {
    return {
      areaList: areaList,
      searchResult: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSave(obj) {
      Toast("收货人添加成功");
      console.log(obj);
      const receiver = obj.name;
      const regions = obj.province + "/" + obj.city + "/" + obj.county;
      const address = obj.addressDetail;
      console.log(receiver, regions, address);
      //   存入localStorage里面一份儿
      localStorage.setItem("receiver", receiver);
      localStorage.setItem("regions", regions);
      localStorage.setItem("address", address);
      this.$store.commit("address/changereceiver", receiver);
      this.$store.commit("address/changeregions", regions);
      this.$store.commit("address/changeaddress", address);
      this.$router.push("/cart");
    },
    onDelete(obj) {
      Toast("数据已清空");
      obj.addressDetail = "";
      obj.city = "";
      obj.county = "";
      obj.name = "";
      obj.province = "";
      obj.tel = "";
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            address: "河南省郑州市高新区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped></style>
